class SoftLabel extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            labelList: [''],
        };
        this.pageCount = 0;
    }

    componentDidMount() {
        this.updateLabelList(1, 10);
        this.verify = {
            softLabeName: function (value) {
                if (value.length < 2) {
                    return '标签名称至少得2个字符!';
                }
            },
            softLabe: function (value) {
                let regex = /^[0-9]{6}$/;
                if (!regex.test(value)) {
                    return '标签必须是6位数字！';
                }
            }
        };
    }

    /* custom functions */
    updateLabelList(page, pageSize) {
        let params = {};
        params.page = page;
        params.pageSize = pageSize;
        let regex = /^[0-9]{6}$/;
        if (regex.test(this.refs.searchLabel.value))
            params.softLabe = this.refs.searchLabel.value;
        else
            params.softLabeName = this.refs.searchLabel.value;
        postJson("/softLabel/queryList.x", params, (data) => {
            let list = data.data.list;
            this.pageCount = data.data.size;
            this.setState({
                labelList: list
            });
        })
    }

    search() {
        this.updateLabelList(1, 10);
    }

    addLabel() {
        this.refs.modal_add_label.show();
    }

    btnSubmit() {
        postJson("/softLabel/save.x", {
            softLabeName: this.refs.softLabeName.value,
            softLabe: this.refs.softLabe.value,
            description: this.refs.description.value
        }, () => {
            layer.msg('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;添加成功', {icon: 6});
            this.updateLabelList(1, 10);
            this.refs.modal_add_label.close();
        });
    }

    delete(softLabelCode) {
        layui.layer.confirm('确定要删除该标签么?删除之后此标签app将无法升级!', (index) => {
            let param = {};
            param.softLabelCode = softLabelCode;
            postJson("/softLabel/remove.x", $.param(param),
                () => {
                    this.updateLabelList(1, 10);
                    layer.msg('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;删除成功', {icon: 6});
                });
            layui.layer.close(index);
        });

    }

    render() {
        return (
            <Frame header="定制标签" headerBtns={
                <HeaderBtn onClick={() => this.addLabel()}><i className="fa fa-plus"/>&nbsp;新增标签</HeaderBtn>
            }
            >
                <Form type="pane" verify={() => {
                    return this.verify;
                }}>
                    <Item>
                        <Label width="lg">软件信息列表</Label>
                        <Input name="searchLabel" ref="searchLabel" btnType="normal"/>
                        <Button btnType="normal" onClick={() => this.search()}>查询</Button>
                    </Item>
                    <Table ref="table" count={this.pageCount}
                           pageOnClick={(page, pageSize) => this.updateLabelList(page, pageSize)}>
                        <thead>
                        <tr>
                            <th>标签名</th>
                            <th>标签</th>
                            <th>描述</th>
                            <th width="60">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        {

                            this.state.labelList.map((label) => {
                                return <tr>
                                    <td>{label.softLabeName}</td>
                                    <td>{label.softLabe}</td>
                                    <td>{label.description}</td>
                                    <td>
                                        <Button size="xs" btnType="danger"
                                                onClick={() => this.delete(label.softLabelCode)}>删除</Button>
                                    </td>
                                </tr>
                            })
                        }
                        </tbody>
                    </Table>

                    <Modal title="添加标签" ref="modal_add_label" area={['60%']}>
                        <Item>
                            <Label>标签名称</Label>
                            <Input type="text" name="softLabeName" ref="softLabeName"
                                   lay-verify="softLabeName"
                                   placeholder="请输入标签名称"/>
                        </Item>
                        <Item>
                            <Label>标签编号</Label>
                            <Input type="text" name="softLabe" ref="softLabe" lay-verify="softLabe"
                                   placeholder="请输入标签编号"/>
                        </Item>
                        <Item>
                            <Label>描述</Label>
                            <Input block={true} type="text" name="description" ref="description"
                                   lay-verify="description"
                                   placeholder="请输入描述"/>
                        </Item>

                        <Item>
                            <Button type="button" style={{float: 'right'}} id="savebt"
                                    onClick={() => this.btnSubmit()}>新增保存</Button>
                        </Item>
                    </Modal>

                </Form>
            </Frame>
        )
    }
}

ReactDOM.render(<SoftLabel/>, document.getElementById('root'));
